import React from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import { login } from "./api";
import { useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import { SET_USER } from "../../store/actionTypes";
import { LeftOutline } from "antd-mobile-icons";
import style from "./login.module.css";
const { loForm, bgLogin, btn, pss, XYDSZ } = style;

const Login = (props: any) => {
  const add = () => {
    window.history.go(-1);
  };
  const navigate = useNavigate();
  const onFinish = ({ phone, password }: any) => {
    props.LOGIN({ phone, password }).then((res: any) => {
      if (res.code == 200) {
        setTimeout(() => {
          navigate("/");
        }, 2000);
      }
    });
    // console.log(username,passwoord,"values")
    // console.log(phone, password)
  };
  return (
    <div>
      <div className={bgLogin}>
        <span onClick={add}>
          <LeftOutline className={XYDSZ} fontSize={25} />
        </span>
      </div>
      <div className={loForm}>
        <Form
          name="form"
          onFinish={onFinish}
          // onFinishFailed={onFinishFailed}
          // 利用其实是插槽
          footer={
            <Button
              block
              type="submit"
              color="primary"
              size="large"
              className={btn}
            >
              <span>登录</span>
            </Button>
          }
        >
          {/* <Form.Header>竖直布局表单</Form.Header> */}
          <p className={pss}>用户账号</p>
          <Form.Item name="phone" rules={[{ required: true }]}>
            <Input placeholder="输入手机号码" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              { required: true },
              // { pattern: /^[0-9]*$/gi, message: "只能是数字" },
              // { max: 6, message: "最大六位" },
            ]}
          >
            <Input type="password" placeholder="输入密码" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
// export default Login
// 自己的props
function mapDispatchToProps(dispatch: any, ownProps: any) {
  console.log(ownProps, "aa");
  return {
    LOGIN: async (userInfo: any) => {
      let res = await login(userInfo.phone, userInfo.password);
      console.log(res);
      if (res.data.length) {
        console.log(res, "res");
        let { id, avatar_url, username } = res.data[0];
        console.log(id, avatar_url, username);
        dispatch({
          type: SET_USER,
          payload: {
            id,
            avatar_url,
            username,
          },
        });

        Toast.show({
          icon: "success",
          content: "登录成功",
        });

        // setTimeout(() => {
        //   ownProps.navigate("/");
        // }, 2000);

        return {
          code: 200,
        };
        // 跳转到首页
        // 弹窗
      } else {
        Toast.show({
          icon: "fail",
          content: "登录失败",
        });
        return {
          code: 2001,
        };
      }
    },
  };
}

export default connect(null, mapDispatchToProps)(Login);
